import { defineStore } from 'pinia'
import type { User } from '@/types/user'
import { ref } from 'vue'

// 下面的pinia代码是官网的例子，是采用的opitons 选项式的api的写法， 类似与vue2里面的vuex的写法
// export const useUserStore = defineStore('user', {
//   // vue3+ts 项目， 如果还采用以前vue2 选项式的写法， ts的类型很不好加，容易报错
//   state: () => ({
//     user: {
//       id: '11111'
//     }
//   }),
//   actions: {
//     // 设置用户的信息
//     setUser(e: User) {
//       this.user = e
//     },
//     // 清空用户信息
//     delUser() {
//       this.user = {} as any
//     }
//   }
// })

// vue3+ts项目里面使用pinia 推荐采用 组合式的写法，比较贴合ts的类型约束，上买的选项式不好使用ts
export const useUserStore = defineStore(
  'user',
  () => {
    // 下面是因为用了假数据，所以报错，等明天吧登录接口写了，这里就用了真实数据，就不会报ts的错误，现在即使报错了，代码还是可以执行
    const user = ref<User | undefined>()
    // // 设置用户的信息
    const setUser = (e: User) => {
      user.value = e
    }
    // 清空用户信息
    const delUser = () => {
      user.value = undefined
    }

    return { user, setUser, delUser }
  },
  {
    persist: true
  }
)
